<template>
  <div>
  <section class="research-result-content">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="bannerBox">
      <img src="./assets/images/banner-2.png" class="banner" />
      <img
        class="banner-word"
        src="./assets/images/slogen.png"
        alt=""
        srcset=""
      />
    </div>
    <div class="content-page" id="page" v-if="!isMobile">
      <div class="main" v-loading="loading">
        <BreadNav :breadList="breadList" style="margin-bottom: 34px" />
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="steps-content">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
          <el-breadcrumb-item class="last-bread">新闻列表详情</el-breadcrumb-item>
        </el-breadcrumb> -->
        <p class="top-title">{{ newsInfo.title }}</p>
        <p class="bottom-info">
          <span class="top-tag">{{ newsInfo.newsTypeName }}</span>
          <span class="time mr15">{{ newsInfo.releaseTime }}</span>
          <span class="time mr15">数据平台</span>
          <span class="time mr15">机构上传</span>
        </p>
        <el-divider></el-divider>
        <div
          class="contentRow"
          v-if="newsInfo.detail"
          v-html="newsInfo.detail.replace(/\n/gm, '<br>')"
        ></div>
        <div v-if="newsInfo.pdfUrl" style="width: 100%; text-align: center">
          <iFrame
            style="width: 100%; height: 600px"
            :src="newsInfo.pdfUrl"
            frameborder="no"
          />
        </div>
        <div class="video" v-if="newsInfo.videoUrl">
          <div class="video-box">
            <vueVideoPlayer :src="newsInfo.videoUrl"></vueVideoPlayer>
          </div>
        </div>
      </div>
    </div>
    <FooterMenu />
  </section>
  <div class="mobile-research-detail-page" >
    <DetailPage />
  </div>
  </div>
</template>
<script>
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header";
import vueVideoPlayer from "@/components/videoPlayer/videoPlayer.vue";
import {
  getStudentNewsStudyInfoById,
} from "@/request/api";
import { formatTime } from "@/utils/utils";
import BreadNav from "@/components/breadNav/index";
import iFrame from "@/components/iFrame/index";
import DetailPage from './mobile/detail.vue'
export default {
  // 组件名称
  name: "studentStyleDetails",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, vueVideoPlayer, FooterMenu, BreadNav, DetailPage },
  // 组件状态值
  data() {
    return {
      newsInfo: {},
      total: 0,
      pageIndex: 0,
      loading: false,
      studentId: null,
    };
  },
  computed: {
    breadList() {
      const path = this.$route.path;
      if (path.indexOf("/searchResultDetail/search") > -1) {
        return [
          {
            name: "首页",
            path: "/",
          },
          {
            name: "研究成果",
            path: "/researchResult",
          },
          {
            name: "研究成果详情",
            path: "",
          },
        ];
        // top-tag
      } else if (path.indexOf("/searchResultDetail/list") > -1) {
        return [
          {
            name: "首页",
            path: "/",
          },
          {
            name: "研究成果",
            path: "/researchResult",
          },
          {
            name: "研究成果列表",
            path: "/resultList",
          },
          {
            name: "研究成果详情",
            path: "",
          },
        ];
      } else {
        return [
          {
            name: "首页",
            path: "/",
          },
          {
            name: "前沿资讯",
            path: "/newsAction",
          },
          {
            name: "前沿资讯详情",
            path: "",
          },
        ];
      }
    },
    isMobile () {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            //移动站
            return true;
        } else {
            //PC站
            return false;
        }
    },
  },
  created() {
    console.log(this.$route, "---this.$route---");
    this.getDetail();
  },
  // 组件方法
  methods: {
    async getDetail() {
      const id = this.$route.query.id;
      const { code, data } = await getStudentNewsStudyInfoById({ id });
      console.log(data, "---详情");
      if (code !== 0) {
        this.newsInfo = {};
        return;
      }
      if (Number(data.status) !== 1){
        this.$router.replace({name: 'researchResult'})
        this.$message.warning('该内容无法查看，请联系平台管理员～')
      }
      this.newsInfo = {
        ...data,
        releaseTime: formatTime(new Date(data.releaseTime)),
      };
    },
  },
  updated() {
    document.getElementById("page").scrollIntoView(true);
  },
};
</script>
<style lang="less" scoped>
.research-result-content {
  .last-bread {
    .el-breadcrumb__inner {
      color: #3d6cb0 !important;
    }
  }
}
@media screen and (max-width: 750px) {
  #app {
    min-width: auto;
  }
  .research-result-content {
    display: none;
  }
  .mobile-research-detail-page {
    display: block !important;
    width: 100vw;
    height: 100vh;
    .empty-page {
      display: flex;
    }
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.research-result-content {
  position: relative;
  width: 100%;
  background: #f5f8fa;
  padding-top: 80px;
  .bannerBox {
    width: 100%;
    position: relative;
    height: 190px;
    overflow-x: hidden;
    .banner {
      width: 100%;
      // -o-object-fit: contain;
      // object-fit: contain;
      height: 100%;
      display: block;
      min-width: 1920px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }
    &::after {
      content: "";
      height: 220px;
      position: absolute;
      top: 0;
      z-index: 1;
      background: rgb(229, 235, 246);
      width: 100%;
      left: 0;
    }
    .banner-word {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 9;
      width: 456px;
    }
  }
}
.content-page {
  position: relative;
  width: 1200px;
  margin: 22px auto;
  min-height: calc(100vh - 570px);
  background: #fff;
  .main {
    height: 100%;
    padding: 23px 30px 50px;
    // display: flex;
    // flex-direction: column;
    align-items: left;

    .steps-content {
      margin: 0 0 20px;
      padding: 0 30px;
      font-size: 15px;
      width: 100%;
    }
    .top-title {
      font-size: 26px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 42px;
      margin-bottom: 10px;
      font-weight: 500;
    }
    .bottom-info {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .top-tag {
        color: #2f8efe;
        border-radius: 4px;
        font-family: PingFangSC-Regular, PingFang SC;
        border: 1px solid #2f8efe;
        background: rgba(47, 142, 254, 0.07);
        display: inline-block;
        width: auto;
        padding: 3px 14px;
        margin-right: 15px;
        font-size: 12px;
      }
      .time {
        color: #9597a0;
        font-weight: 400;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
      }
      .mr15 {
        margin-right: 8px;
      }
    }

    .top-subtitle {
      color: #666;
      line-height: 37px;
      margin-bottom: 14px;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 28px;
    }
    .top-tip {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 25px;
    }
    .list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 34px;
      .list-item {
        .item-title {
          font-size: 23px;
          font-weight: 500;
          color: #0c0c0c;
          line-height: 32px;
          margin-bottom: 20px;
        }
        .item-test {
          font-size: 23px;
          font-weight: 400;
          color: #0c0c0c;
          line-height: 32px;
          margin-bottom: 42px;
        }
      }
      .list-img {
        width: 464px;
        height: 298px;
      }
    }
    .video {
      width: 100%;
      padding-top: 56.25%;
      position: relative;
      .video-box {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 40%);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn-img {
          width: 87px;
          height: 87px;
        }
      }
    }
    .bottom-nav {
      margin-top: 80px;
      display: flex;
      justify-content: space-between;
      color: #2f8efe;
      .el-icon-arrow-left {
        margin-right: 10px;
      }
      .el-icon-arrow-right,
      .el-icon-arrow-down {
        margin-left: 10px;
      }
      .nav-item {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        color: #2f8efe;
        line-height: 33px;
        cursor: pointer;
        &.disabled {
          color: #999;
          cursor: no-drop;
        }
      }
    }
    /deep/ .contentRow {
      position: relative;
      word-break: break-all;
      word-wrap: break-word;
      img {
        max-width: 100%;
      }
    }
  }
}
.student-selecte {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: scroll;
  .student-item {
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .student-item:hover {
    background-color: #f5f7fa;
  }
}
</style>
